<template>
  <div class="home-container">
    <!-- 1.导航栏 -->
    <van-nav-bar fixed placeholder>
      <template #left>
        <div class="logo"></div>
      </template>
      <template #right>
        <div class="seach">
          <van-button
            icon="search"
            type="info"
            round
            @click="$router.push({ path: '/search' })"
          >
            搜索
          </van-button>
        </div>
      </template>
    </van-nav-bar>
    <!-- 2.tap栏 -->
    <van-tabs v-model="active" title-active-color="green" @click="tabClick">
      <!-- 渲染列表 -->
      <van-tab v-for="item in channels" :title="item.name" :key="item.id">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <van-cell
              v-for="item in list"
              :key="item.art_id.toString()"
              :title="item.title"
              @click="
                $router.push({ path: '/articles', query: { id: item.art_id } })
              "
            >
              <!-- 插槽 -->
              <template #label>
                <!-- 宫格   此宫格被划分为3段 -->
                <van-grid :column-num="item.cover.type">
                  <!-- 单个宫格里 item 是其中一项  -->
                  <!-- 图片渲染不止一个宫格,用v-for重复渲染 -->
                  <van-grid-item
                    v-for="(img, index) in item.cover.images"
                    :key="index"
                  >
                    <van-image lazy-load :src="img" />
                  </van-grid-item>
                </van-grid>
                <div id="author">
                  <span>{{ item.aut_name }}</span>
                  <span>({{ item.comm_count }})评论</span>
                  <span>{{ item.pubdate | fromNow }}</span>
                </div>
              </template>
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
// 导入接口
import { getChannels } from "./home.js";
// 导入文章列表
import { getArticles } from "./home.js";
//导入moment
import moment from "moment";
//设置语言
moment.locale("zh-cn");
export default {
  name: "home",
  data() {
    return {
      active: 0, //tab标签页下标
      list: [],
      finished: false, //触底如果为true 则中止onload事件的触发
      loading: false, //loging 加载动画
      isLoading: false, //下拉刷新动画
      channels: {}, //tab栏数据
      timestamp: null, // 给个空时间戳
    };
  },
  async created() {
    // 发起请求
    let res = await getChannels();
    // console.log(res);
    // 绑定数据
    this.channels = res.data.data.channels;
  },
  methods: {
    async onLoad() {
      // 判断是否下拉刷新
      if (this.isLoading) {
        // 清空列表
        this.list = [];
        // 下拉框加载动画复原
        this.isLoading = false;
        // 清空时间戳
        this.timestamp = null;
      }
      // 加载当前时间戳列表 判断当前是否有时间戳
      if (!this.timestamp) {
        //获取当前时间戳
        this.timestamp = Date.now();
      }

      // 发起文章列表请求
      let res = await getArticles({ channel_id: 0, timestamp: this.timestamp });
      // console.log(res);
      // 修改时间戳为当前时间戳
      this.timestamp = res.data.data.pre_timestamp;
      // 绑定数据渲染页面  数组无法直接push 需要...展开
      this.list.push(...res.data.data.results);
      // 加载完毕 上拉动画取消
      this.loading = false;
      // 如果数据超过服务器的总和 不再触底发起请求
      if (this.list.length >= 100) {
        this.finished = true;
        // 触底后调用刷新重新获取页面数据
        this.onRefresh();
      }
    },
    onRefresh() {
      // 一旦下拉刷新 无条件finished为false
      this.finished = false;
      // 清空数据
      this.list = [];
      // 设置上拉加载更多为true
      this.loading = true;
      // 重新发起请求
      this.onLoad();
      // 关闭下拉加载动画
      this.isLoading = false;
    },
    // 切换tab栏事件
    tabClick() {
      // 清空列表
      this.list = [];
      // 配套login加载状态
      this.loading = true;
      // 调用重新渲染页面
      this.onLoad();
    },
  },
  //过滤器
  filters: {
    fromNow(value) {
      return moment(value).fromNow();
    },
  },
};
</script>

<style lang="less">
* {
  // 內减
  box-sizing: border-box;
}
body {
  overflow: hidden;
}
.home-container {
  height: 100vh;
  // padding-top: 46px;
  padding-bottom: 50px;

  // 导航栏样式
  .logo {
    background: url("~@/assets/logo.png") no-repeat;
    background-size: cover;
    width: 100px;
    height: 30px;
  }
  .seach {
    color: #fff;
    .van-button--info {
      width: 100px;
      height: 30px;
      font-size: 14px;
      background-color: #1dadfb;
      border: none;
      margin-right: 10px;
    }
    .van-icon-search {
      color: #fff;
    }
  }
  // 标签栏样式
  .van-tabs {
    height: 100%;
    padding-top: 46px;
    padding-bottom: 50px;
    .van-tabs__wrap {
      width: 100%;
      position: fixed;
      left: 0;
      right: 0;
      top: 46px;
      // 脱标后被盖住 增加层级显示到最上层
      z-index: 10;
    }
    .van-tabs__content {
      height: 100%;
      overflow-y: scroll;
    }
  }
  #author span {
    padding-right: 20px;
  }
}
</style>